<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Inkpad ヘルプ</title>
            <meta name="author" content="Steve Sprang">
            <link rel="stylesheet" type="text/css" href="styles.css">
            <script src="jquery-1.7.1.min.js"></script>
            <script src="retina.js"></script>
    </head>
    <body>

        <div class="content">

            <h1>Inkpadとは？</h1>

            <img class="logo" src="Icon.png" width="130" height="130" alt="Logo"/>
            InkpadはiPad用にイチから設計されたベクトル（ドロー系）イラストアプリです。Inkpadはパス，パスの結合，テキスト，パスに沿ったテキスト，画像，グループ，マスク，グラデーション塗りつぶしに対応し，レイヤ数の制限もありません。
            
            <p>
            InkpadはMozilla Public License v2.0（<a href="http://mozilla.org/MPL/2.0/">http://mozilla.org/MPL/2.0</a>）の元で公開されているフリーソフトウェアで，GitHub（<a href="https://github.com/sprang/Inkpad">http://github.com/sprang/Inkpad</a>）からソースコードを取得することができます。
            
            <p>
            <div style="clear: both;"></div>

            <h1>ギャラリー</h1>
            ギャラリーには各イラストのサムネイルが表示されます。サムネイルをタップすることでイラストを編集や閲覧用に開くことができ，サムネイル下のタイトルをタップすることでイラストのタイトルを変更することができます。
            
            <p>
            画面右上に表示されている <b>+</b> ボタンをタップすることで，イラストを新規作成することができます。
            
            <p>
            <b>カメラ</b> ボタンをタップすることで，カメラで撮影した写真を背景にしたイラストを新規作成することができます。
            
            <p>

            <h3>インポート</h3>
            Inkpadでは，Dropboxから画像ファイルやフォント（TrueTypeかOpenType），SVGファイル，SVGZ（圧縮SVG）ファイル，およびInkpad形式のファイルをインポートできます。Dropboxに接続するには <b>インポート</b> をタップしてください。
            
            <p>
            インポートされたフォントは，ギャラリーの <b>フォント</b> パネルに表示され，不要になれば削除することもできます。イラストの編集中にはインポートされたフォントもデフォルトフォントと一緒に <b>フォント</b> パネル内に表示されます。
            
            <p>
            Inkpadに同梱されているサンプルアートワークを再インストールするには <b>サンプル</b> ボタンをタップしてください。
            
            <p>

            <h3>エクスポート</h3>
            まず <b>選択</b> をタップして選択モードに移行します。
            
            <p>
            選択モードでは，サムネイルをタップすることでそれらを選択（もしくは選択解除）することができます。１つ以上のイラストが選択されている状態であれば，<b>Eメール</b> をタップしてそれらを電子メールで送信したり，<b>Dropbox</b> をタップしてそれらをDropboxへ直接アップロードすることができます。
            
            <p>
            <b>ゴミ箱</b> をタップすることで，選択中のイラストを削除することができます。
            
            <p>
            <b>Done</b> をタップすれば選択モードを抜けることができます。
            

            <h1>イラスト編集</h1>

            <b>編集</b> メニューからは，カット，コピー，貼り付け，切り取り，および選択オブジェクトの変更などを利用できます。
            
            <p>
            <b>アレンジ</b> メニューからは，オブジェクトを前面や背面へ移動させたり，グループ化（またはグループ解除）したり，均等配置したり，整列させたりできます。
            
            <p>
            <b>パス</b> メニューからは，アンカーの追加，削除，線のアウトライン化，パスの追加，パスの結合，マスク作成，パス上へのテキスト配置を利用できます。
            
            <p>

            <img class="color_inline" src="color_wheel.png" width="27" height="27" alt="Color Adjustment"/>

            <b>色調整</b> メニューでは，選択図形の塗りつぶし色をブレンドしたり，選択したオブジェクトの色相/彩度/明度を調整したり，モノクロ化や色調反転を実行できます。
            
            <p>
            色ブレンドを実行する場合，選択された図形のうち両端の図形は単色で塗りつぶされていなければいけません（グラデーションは不可）。例えば，水平方向のブレンドであれば一番左の図形と一番右の図形は単色で塗りつぶされている必要があります。さらに，ブレンドオプションは３つ以上の図形が選択されていないと使用できません。
            
            <p>

            <img class="undo_inline" src="undo.png" width="24" height="24" alt="Undo"/>

            <b>取り消し</b> ボタンをタップすることで，変更を１つ取り消す事ができます。
            
            <p>

            <img class="undo_inline" src="redo.png" width="24" height="24" alt="Redo"/>

            <b>やり直し</b> ボタンをタップすることで，取り消した変更を１つやり直す事ができます。
            
            <p>
            画面右上には，イラスト編集中に利用できる様々なボタンが並んでいます。
            
            <p>

            <div class="example" style="top-margin:-1em;">
                <img src="drawing_navbar.png" width="185" height="29" alt="Drawing Nav Bar"/>
            </div>

            <p>
            左から順に，<b>イラストを画面サイズに合わせる</b>，<b>写真を挿入</b>，<b>設定</b>，<b>共有/エクスポート</b> ボタンとなっています。
            
            <p>

            <h3>設定</h3>

            <b></b> パネルから，グリッドの表示/非表示を切り替えたり，グリッドの間隔を調整したり，オブジェクトをグリッドや既存パス上の任意のポイント，または既存パスの端にスナップさせるかどうかを変更することができます。また，ルーラーの表示を切り替えたり，長さの単位を変更したり，
            
            <p>
            <b>アクティブレイヤの分離</b> を有効にすると，アクティブレイヤ上のオブジェクトだけが変更可能になります。その際，アクティブレイヤ以外のオブジェクトは色が薄い表示になります。この機能によって，関係ないレイヤのオブジェクトを誤って操作してしまう心配なく，特定のコンテンツだけを操作することができるようになります。
            
            <p>
            <b>アウトラインモード</b> を有効にすると，オブジェクトのアウトラインだけが表示されるようになります。この機能によって，他のオブジェクトにまぎれてしまうようなオブジェクトを用意に選択できるようになるほか，複雑なイラストのレンダリング時間を著しく削減することもできます。
            
            <p>


            <h3>ズーム</h3>

            iOSで一般的に使用されるピンチ操作をすることでズームイン/アウトすることができます。ピンチを行った後，片方の指を離すことで，ズームレベルを変えずにカンバスの位置を変更することができます。
            
            <p>
            イラストサイズの単位にピクセルを使用している場合，Inkpadはイラストのズームレベルが100%であった場合の（ナビゲーションバーに表示される）実際のピクセルサイズを表示します。
            
            <p>
            イラストサイズの単位に（インチやセンチメートル等の）物理単位を使用している場合，Inkpadはイラストのズームレベルが100%であった場合の印刷サイズを表示します。
            

            <h1>ツール</h1>

            <img class="tool_palette" src="tools.png" width="50" height="196" alt="Tool Palette"/>

            Inkpadではイラストを作成したり変更したりするためのツールをいくつも備えています。
            
            <p>
            ツールパレットはカンバス上に重ねて表示され，ドラッグすることで画面上を移動させることができますし，必要であればフリック操作で好きな方向へ弾き飛ばすこともできます。
            
            <p>
            いくつかのツールは，カンバス上で指１本によるドラッグを開始した<b>後で</b>２本めの指をタッチすることで動作が変化します。ただし，ドラッグを開始する前に２本目の指をタッチしてしまうと（上記の）ズーム動作になってしまします。
            
            <p>
            個々のツールの動作は下記を参照してください。
            

            <div style="clear:both;padding-bottom:0.25em;"></div>

            <h3>選択ツール/複数選択ツール</h3>

            <img class="tool_inline" src="select.png" width="30" height="30" alt="Selection Tool"/>

            選択ツールでは，イラスト上のオブジェクトの中から常に１つだけを選択します。新たに選択ツールによってオブジェクトが選択された場合，それ以前に選択されていたオブジェクトはすべて選択が解除されます。
            
            <p>

            <img class="tool_inline" src="groupSelect.png" width="30" height="30" alt="Multi Selection Tool"/>

            複数選択ツールは，新たなオブジェクトを選択したさい，それまでの選択済みオブジェクトはそのままに，選択オブジェクトを追加します。複数選択ツールで選択済みオブジェクトをタップすると，そのオブジェクトの選択を解除できます。
            
            <p>
            カンバスの何もない場所をタップして，オブジェクトを囲うようにドラッグすると，複数のオブジェクトを一度に選択することができます。この時，選択範囲を示す四角形（マーキー）が表示されます。
            
            <p>
            選択済みオブジェクトをドラッグすることで，オブジェクトの位置を変更することができます。移動方向を上下左右と斜め45°だけに制限したい場合は，ドラッグを開始した後で２本めの指をタッチ＆ホールドしてください。
            
            <p>
            パスが１つだけ選択されている場合，パスのアンカーポイントやコントロールハンドルを操作することができます。後述するペンツールのように，コントロールハンドルの操作中に２本めの指をタッチ＆ホールドすることで，選択しているコントロールハンドルの反対側の位置を固定して，片方だけを操作することができます。
            
            <p>
            パス上のアンカーをダブルタップすると，アンカーにポイントにコントロールハンドルを追加してカーブを追加できます。コントロールハンドルはダブルタップで削除できます。
            
            <p>
            アンカーをダブルタップしてからドラッグすると，コントロールハンドルをお互いに対称な状態で移動させることができます。
            
            <p>

            <h3>ペンツール <img class="tool_header" src="pen.png" width="30" height="30" alt="Pen Tool"/></h3>

            ペンツールはInkpadでパスを生成する最も強力な手段で，これを使えばどんな図形でも作成できます。まず最初にパレットのペンツールをタップしてください。
            
            <p>
            作りたい図形の角（アンカーポイント）となる１箇所をタップします。他の角も順にタップしていくことで，直線で構成された多角形が作成できます。
            

            <div class="example">
                <img src="polygon_path.png" width="195" height="84" alt="Polygon"/>
            </div>

            角を曲線にしたい場合，タップした状態でドラッグすると，角の曲線を指定するためのコントロールハンドルが表示されます。このコントロールハンドルをアンカーポイントから遠くへ離すほどカーブの曲率が急なものになります。
            

            <div class="example">
                <img src="curve.png" width="217" height="167" alt="Curve"/>
            </div>

            コントロールハンドルを個別に動かすこともできます。ドラッグ開始後にカンバスを２本めの指でタップ＆ホールドすると，動かしているのと反対側のコントロールハンドルが停止します。これを利用すると，１つのアンカーポイントで２つのカーブが連結された形状を作成することができます。
            
            <p>
            <div class="example">
                <img src="corner.png" width="200" height="200" alt="Corner"/>
            </div>

            作成中のパスの最初のアンカーポイントをタップすると，パスを閉じることができます。
            
            <p>
            パス上の最後のアンカーポイントをダブルタップすると，パスを閉じずに図形を確定することができます。
            
            <p>
            閉じていない既存のパスを再編集するには，まず選択ツールでパスを選択して，その後，ペンツールでパスのどちらかの端のアンカーポイントをタップしてください。そうすると，そのアンカーポイントからパスを延長したり，反対端のアンカーポイントをタップしてパスを閉じたりできます。
            

            <h3>フリーハンドツール <img class="tool_header" src="brush.png" width="30" height="30" alt="Freehand Tool"/></h3>

            フリーハンドツールではカンバス上に自由な形を描画することができます。この機能は手書き風イラストを作成するのにうってつけです。
            
            <p>

            <h3>消しゴムツール <img class="tool_header" src="eraser.png" width="30" height="30" alt="Eraser Tool"/></h3>

            消しゴムツールでは，図形の一部を消すことができます。この機能はグループ化されていないパスか，複合パスに対して使用できます。
            
            <p>
            いずれかの図形が選択された状態で使用した場合，消しゴムツールは選択されている図形だけに作用します。
            
            <p>
            消しゴムツールを選択した際にカンバスの下の方に表示されるミニ設定パネルで，消しゴムのサイズを変更することができます。
            
            <p>

            <h3>アンカー追加ツール <img class="tool_header" src="add_anchor.png" width="30" height="30" alt="Add Anchor Tool"/></h3>

            アンカー追加ツールは，（その名の通り）イラスト内の既存のオブジェクトに新しいアンカーポイントを追加します。
            
            <p>

            新しいアンカーポイントを追加するには，図形のパス上をタップしてください。
            
            <p>
            アンカー追加ツールはパスが未選択の状態でも機能しますが，先にパスを選択しておくと，既存のアンカーポイントが表示されるため，アンカーポイントを追加がより容易になります。
            
            <p>

            <h3>ハサミツール（パス切断ツール） <img class="tool_header" src="scissor.png" width="30" height="30" alt="Scissor Tool"/></h3>

            ハサミツールは既存のパスを切断することができます。
            
            <p>
            パスを分割するには，パス上の切断したい場所をタップしてください。アンカーポイントで切断したい場合には，そのアンカーポイントをタップしてください。
            
            <p>
            閉じたパスを切断した場合，パスが開放された上で両端のアンカーポイントがハサミツールでタップした場所に置かれます。閉じていないパスを切断した場合，タップ場所で２つのパスに分割されます。
            
            <p>

            <h3>図形ツール <img class="tool_header" src="rect.png" width="30" height="30" alt="Rectangle Tool"/>
                <img class="tool_header" src="oval.png" width="30" height="30" alt="Oval Tool"/>
                <img class="tool_header" src="star.png" width="30" height="30" alt="Star Tool"/>
                <img class="tool_header" src="polygon.png" width="30" height="30" alt="Polygon Tool"/>
                <img class="tool_header" src="spiral.png" width="30" height="30" alt="Spiral Tool"/>
                <img class="tool_header" src="line.png" width="30" height="30" alt="Line Tool"/></h3>


            図形ツールでは四角形，楕円，星形，多角形，渦巻き，直線を作成します。
            
            <p>
            ツールパレット上の図形ツールをタップしたままホールドすることでサブパネルが表示され，他の図形を選択することができます。
            
            <p>
            通常は四角形と楕円の縦横比は決められていません。もし正方形や真円を描きたい場合には，図形ツールでカンバス上をドロップし始めた後で，２本目の指をタップ＆ホールドしてください。
            
            <p>
            カンバスの下の方に表示されるミニ設定パネルで，四角形の角丸サイズや，星形の角の数，渦の減衰率，多角形の辺の数などを調整することができます。
            
            <p>
            星形を選択してドラッグ中に２本めの指でスクリーンをタッチすると，星の中心から谷側までの距離が固定されます。これを利用して，角の鋭い星形や鈍い星形を描画できます。
            
            <p>
            直線をドラッグ中に２本めの指でスクリーンをタッチすると，直線の向きが垂直，水平，斜め45°のいずれかに限定されます。
            
            <p>

            <h3>スポイトツール <img class="tool_header" src="eyedropper.png" width="30" height="30" alt="Eyedropper Tool"/></h3>

            スポイトツールでは後述するスタイルパネルで変更可能なスタイル情報を既存のオブジェクトから取得することができます。
            
            <p>
            スポイトツールを選択した後，リングを使用したいスタイルをもつオブジェクトまでドラッグしてください。
            
            <p>
            スポイトツールでスタイルを取得した時点でなにもオブジェクトが選択されていない場合，取得したスタイルは次に作成されるオブジェクトに適用されます。いずれかのオブジェクトが選択されていれば，取得したスタイルは選択中のオブジェクトに適用されます。
            
            <p>

            <h3>テキストツール <img class="tool_header" src="text.png"  width="30" height="30" alt="Text Tool"/></h3>

            テキストツールではテキストオブジェクトを作成できます。
            
            <p>
            まず，カンバス上をタップ後にドラッグしてテキストボックスを作成してください。ドラッグが終わるとソフトウェアキーボードが表示され，テキストの入力が可能になります。テキスト入力を終了するには，カンバス上のどこか別の場所をタップしてください。
            
            <p>
            既存のテキストを再編集するには，テキストツールを選択後にテキストオブジェクトをタップするか，選択ツール（もしくは複数選択ツール）でテキストオブジェクトをダブルタップしてください。
            
            <p>

            <h3>拡大/縮小ツール，回転ツール</h3>

            拡大/縮小ツールと回転ツールは選択中のオブジェクト（複数可）を変形させます。
            
            <p>

            どちらのツールも，シングルタップでピボットポイント（最初は選択オブジェクトの中央に表示）を移動することができます。ドラッグをすると，拡大/縮小ツールの場合はピボットポイントを基準にサイズが変化し，回転ツールの場合はピボットツールを中心にオブジェクトが回転します。
            
            <p>
            <img class="tool_inline" src="scale.png"  width="30" height="30" alt="Scale Tool"/>

            通常，拡大/縮小ツールはアスペクト比を保持しますが，２本めの指でカンバスをタッチすると自由な縦横比で拡大/縮小できます。
            
            <p>
            <img class="tool_inline" src="rotate.png"  width="30" height="30" alt="Rotate Tool"/>

            通常，回転ツールは自由な角度に回転できますが，２本めの指でカンバスをタッチすると回転角度が45°刻みに制限されます。
            

            <h1>オブジェクトのスタイル</h1>

            ツールバー上のスタイル関係ボタンをタップして，選択中のオブジェクトの見た目を変化させることができます。
            
            <p>

            <div class="example" style="margin-bottom:-0.5em;">
                <img src="style_bar.png" width="252" height="30" alt="Styles Toolbar"/>
            </div>
            <p>
            左から順に <b>フォント</b>，<b>影と不透明度</b>，<b>線</b>，<b>塗り</b>，<b>スウォッチ</b> です。
            
            <p>
            <b>影と不透明度</b> ボタンでは，現時点の影の色と方向に加え，オブジェクトの透明度を確認，変更することができます。<b>線</b> ボタンと <b>塗り</b> ボタンで表示される色は，新しいオブジェクトを作成する際にも使用されます。
            
            <p>

            <h3>スウオッチ</h3>

            <b>スウォッチ</b> パネルには，線や塗りの色，グラデーションなどを後々再利用するために保存しておくことができます。
            
            <p>
            パネルの下側に表示されている <b>影/線/塗り</b> コントロールは，パネル右上の <b>+</b> をタップした際にどのスタイルが保存されるかを表しています。これは同時に，パネル内のスウォッチをタップした際に，どのスタイルが設定されるかも表しています。
            
            <p>
            ただし，グラデーションは塗りつぶしにしか効果がありませんので，グラデーションを選択した場合は上記コントロールの状態に関わらず塗りつぶし色に適用されます。
            
            <p>

            <h1>グラデーション</h1>

            グラデーションは２色以上の色の遷移による塗りつぶしスタイルです。グラデーションはいくつかのカラーストップの集合として指定されます。各カラーストップはそれぞれ色とグラデーション内での位置を示しています。
            
            <p>
            グラデーションを使用するには，<b>塗り</b> パネルを開き，タイトルバーに表示される <b>グラデーション</b> ボタンをタップしてください。
            
            <p>
            カラーストップはタップすることで選択できます。パネル上部のスライダーを調整して選択中のカラーストップの色を変更できます。またカラーストップをドラッグしてグラデーション内での位置を変更できます。
            
            <p>
            グラデーションの方向を逆にするには，グラデーションバー（カラーストップのすぐ上）を右か左へスワイプしてください。
            
            <p>
            カラーストップを均等に配置するには，グラデーションバーをダブルタップしてください。
            
            <p>
            カラーストップを削除するには，上か下方向にドラッグしてください。
            
            <p>
            新しいカラーストップを追加するには，カラーストップの間の空きスペース（グラデーションバーの下）をタップしてください。
            
            <p>
            ある図形がグラデーションで塗りつぶされている（加えて単独選択されている）場合，グラデーションの開始点と終了点を示す特殊なコントロールハンドルが表示されます。
            
            <p>
            <div class="example" style="margin-bottom:-1.5em;">
                <img src="gradient_canvas.png" width="215" height="150" alt="Gradient on Canvas"/>
            </div>

            <h1>レイヤー</h1>

            インクパッドではレイヤーの数に制限がありません。レイヤーは複雑なイラストを作成するのに便利な機能です。イラストの各部分をそれぞれ独立したレイヤー上に置くことで，編集操作が非常に楽になります。
            
            <p>
            レイヤーは，削除したり，複製したり，順序を入れ替えたり，名前を変えたり，ロックしたり，非表示にしたりできます。また，各レイヤーの透明度を制御することもできます。
            
            <p>
            <b>レイヤー</b> ボタンをタップすることで，イラストで使用中のレイヤーを確認することができます。
            
            <p>

            <h1>パスの結合</h1>

            開放状態の２つのパスを結語するには，両方のパスを選択してから，<b>パス</b> メニューにある <b>パス結合</b> を選択してください。
            
            <p>
            ２つのパスは一番近い端同士で結合されるので，予め繋ぎたい形にパスを並べてから <b>パス結合</b> を実行するとよいでしょう。
            
            <p>
            結合後の新しいパス上で，結合ポイントとは逆側の端が同じ位置に来る場合，（そちらの端も結合されることによって）新しいパスは閉じたものになります。
            

            <h1>複合パス</h1>

            複合パスは複数のパスによって構成されたパスです。複合パスは穴の空いた形状を作成するのに便利です。
            
            <p>
            複合パスを作成するには，複数のパス（複合パスでも可）を選択したのち，<b>パス</b> メニューから <b>複合パス化</b> を選択してください。
            
            <p>
            複合パスを個別のパスに分解するには，<b>パス</b> メニューから <b>複合パスの分解</b> を選択してください。
            
            <p>
            複合パスに含まれるパスの向きによって，複合パスのうちどのパスが塗り潰されるのかが決まります。もし複合パスを構成するパスが全て同じ向きであれば，全てのパスが塗りつぶされます。
            
            <p>
            もし２つのパスを使って穴あき形状を作りたいが，穴以外の（重なりあっていない）場所は塗りつぶしたいような場合，複合パスのうち１つだけパスを選択して，<b>パス</b> メニューから <b>パスの向きを逆転</b> を選択してください。
            
            <p>

            <h1>パス上へのテキスト配置</h1>

            パス上にテキストを配置するには，複合パスでないパスを１つだけ（もしくはそうしたパスと既存のテキストオブジェクト）選択し，<b>パス</b> メニューから <b>パス上にテキストを配置</b> を選択してください。
            
            <p>
            パス上にテキスト編集エリアが表示されます。このテキスト編集エリアは，パスが選択された状態でダブルタップする（もしくはテキストツールをつかってパスをタップする）ことで再度利用することができます。
            
            <p>
            こうしたパスも通常のパスと同じように編集できますが，スタイルはテキストに関するものしか適用されません。
            
            <p>
            テキストの先頭に表示されるスタートバーをドラッグすることで，パス上のテキストの先頭位置を調整できます。
            
            <p>
            テキストをパスの反対側に表示させたい場合は，<b>パス</b> メニューから <b>パスの向きを逆転</b> を選択してください。
            
            <p>

            <h1>マスク</h1>

            マスクとは，ほかの描画要素を切り抜くためのパス，複合パス，またはテキストオブジェクトです。
            
            <p>
            マスクを作成するには，マスクしたい対象のオブジェクトと，マスクに使用するパスかテキストオブジェクトを選択し（マスクに使用するオブジェクトは選択中のオブジェクトの中で最前面にあること），<b>パス</b> メニューから <b>マスク</b> を選択してください。
            
            <p>
            マスクを解除するには，マスクされたオブジェクトを選択して，<b>パス</b> メニューから <b>マスク解除</b> を選択してください。
            
            <p>
            マスクに使用したバスも，通常のパスと同様に，指定された線や塗りつぶし色で描画されます。
            
            <p>

        </div>

    </body>

    <script type="text/javascript">
        highdpi_init();
    </script>
</html>
